<template>
  <f7-page class="bg-color-white">
    <f7-navbar :title="$t('m.pr1')" back-link=" "></f7-navbar>

    <div class="content-padding margin-t20">
      <custom-input :placeholder="$t('m.pr2')" type="tel" v-model="rechargeItems.phone"></custom-input>
      <p>{{$t('m.pr3')}}</p>

      <single-select class="margin-t20 recharge-list" v-model="rechargeItems.type" flex>
        <single-select-item :value="item.name" v-for="(item, index) in rechargeTypes" :key="index">
          <h3>{{item.money}}{{$t('m.pr4')}}</h3>
          <p>{{$t('m.pr5')}}：{{item.coin_num}}ZOL</p>
        </single-select-item>
        <!--<single-select-item :value="2">
          <h3>100元</h3>
          <p>售价：60.00BDF</p>
        </single-select-item>
        <single-select-item :value="3">
          <h3>100元</h3>
          <p>售价：60.00BDF</p>
        </single-select-item>-->
      </single-select>

      <f7-button fill color="blue" large @click="handleRecharge">{{$t('m.pr6')}}</f7-button>
    </div>

    <div class="my-table">
      <f7-row class="table-title">
        <f7-col>{{$t('m.pr7')}}</f7-col>
        <f7-col>{{$t('m.pr8')}}</f7-col>
        <f7-col width="30">{{$t('m.pr9')}}</f7-col>
        <f7-col>{{$t('m.pr10')}}</f7-col>
      </f7-row>
      <f7-row class="table-data" v-for="(item, index) in logs" :key="index">
        <f7-col>{{item.phone}}</f7-col>
        <f7-col>{{item.money}}</f7-col>
        <f7-col width="30">{{$moment(item.add_time * 1000).format('YYYY/MM/DD')}}</f7-col>
        <f7-col>{{item.status | statusFilter}}</f7-col>
      </f7-row>
    </div>

  </f7-page>
</template>

<script>
  import SingleSelect from '../ajComponents/singleSelect/singleSelect';
  import SingleSelectItem from '../ajComponents/singleSelect/singleSelectItem';
  import { getPhoneRechargeTypesList, phoneRecharge, phoneRechargeLogs } from "../api/find";
  import i18n from "../i18n";

  export default {
    name: "phone-recharge",
    data () {
      return {
        rechargeItems: {
          type: '1',
          phone: '',
        },
        rechargeTypes: [],
        logs: []
      }
    },
    filters: {
      statusFilter(status) {
        return status === '0' ? i18n.t('m.pr11') : item.status === '1' ? i18n.t('m.pr12') : i18n.t('m.pr13');
      }
    },
    mounted() {
      this.init();
      this.initLogs();
    },
    methods: {
      init() {
        getPhoneRechargeTypesList().then(res => {
          this.rechargeTypes = res.data;
        })
      },
      initLogs() {
        phoneRechargeLogs().then(res => {
          this.logs = res.data;
        })
      },
      handleRecharge() {
        console.log(this.rechargeItems);
        phoneRecharge(this.rechargeItems).then(() => {
          this.initLogs();
        })
      }
    },
    components: {
      SingleSelect,
      SingleSelectItem
    }
  }
</script>

<style scoped lang="scss">
  .recharge-list {
    p {
      font-size: 20px;
      margin-top: 10px;
    }
  }
  .button {
    margin-top: 50px;
  }
</style>
